<template>
  <div id="cate">
    <div class="left">
      <van-sidebar v-model="sidebarActive" @change="onChangeSidebar">
        <van-sidebar-item v-for="(item,index) in categorys" :key="index" :title="item.name" />
      </van-sidebar>
    </div>
    <div class="right">
      <van-image width="100%" height="150" :src="categorys[sidebarActive].banner_url">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
      <van-divider :style="{ color: 'black', borderColor: 'red' }">{{categorys[sidebarActive].name}}分类</van-divider>
      <van-grid :column-num="3">
        <van-grid-item v-for="(item,inde) in categorys[sidebarActive].children" :key="inde" :icon="item.banner_url" :text="item.name" :to="`/cateGoods/${categorys[sidebarActive].id}/${item.id}`" />
      </van-grid>
    </div>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #cate{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    .left{
      flex: 0 0 auto;
    }
    .right{
      flex: 1 1 auto;
      padding: 5px 10px;
    }
  }
</style>

<script lang="ts">
// @ is an alias to /src
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import {
  Sidebar, SidebarItem,Image as VanImage,Divider,Grid,
  GridItem
} from 'vant';
import router from '../router';
import store from '../store/index';

Vue.use(Sidebar).use(SidebarItem).use(VanImage).use(Divider).use(Grid)
.use(GridItem);
@Component
export default class CategoryComponent extends Vue {
  private sidebarActive: number = 0;
  private categorys: any[] = [{id:'',banner_url:'',name:'',children:[{banner_url:''}]}];

  async created(){
    store.commit('global/setShowPageLoading',true);
    await store.dispatch('category/getCategory');
    this.categorys=store.getters['category/category'].data;
    //console.log(this.categorys);
    store.commit('global/setShowPageLoading',false);
  }
  
  private onChangeSidebar(index){
    //console.log(index);
  }
}
</script>
